<template>
  <div class="hello">
    <h1>dayjs示例</h1>
    {{ date }}
    <custom-tooltip :tooltip="`tooltip具体内容`">
      <div style="margin-right: 5px">点击按钮显示tooltip</div>
    </custom-tooltip>
    <br />
    <h1>多语言示例</h1>
    <button @click="switchLang">{{ switchLangTxt }}</button>
    {{ $t("msg.msg_welcome") }}
    <h1>SCSS示例</h1>
    <div class="main">
      测试scss
      <div class="hello">嵌套scss</div>
    </div>
    <h1>Vuex示例</h1>
    <div>
      {{ count }}
    </div>
    增加count <button @click="$store.commit('add')">+ add</button> <br />
    减少count <button @click="$store.commit('minus')">- minus</button> <br />
    增加count Action<button @click="addAction()">+ add</button> <br />
    减少count Action<button @click="reduceAction()">- minus</button> <br />

    <h1>Router示例</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/TestRouter">测试Router</router-link>

    <router-link :to="{ name: 'TestRouter1', params: { username: 'Joe' } }"
      >测试Router1</router-link
    >
    <router-link :to="{ name: 'TestRouter2', params: { username: 'Loyd' } }"
      >测试Router2</router-link
    >
    <router-link to="params/233/joe">链接传参</router-link>
    <router-link to="/GoParams/344/loyd">重定向首页</router-link>
    <router-link to="Hi">Hi</router-link>
    <router-link to="joe">别名</router-link>
    <h1>功能组件示例</h1>
    <div>
      <router-link to="CommentsMessage">简单留言板</router-link>
      <router-link to="ShopCart">简单购物车</router-link>
      <router-link to="ScrollLoadingSample">滚动加载</router-link>
      <router-link to="LinkingSelect">联动下拉选择</router-link>
      <router-link to="ElementTableSample">element table 案例</router-link>
      <router-link to="EmbededTable">嵌套表格 案例</router-link>
    </div>
    <h1>chartJs封装示例</h1>
    <div>
      <router-link to="ChartJsSample">chartJs封装</router-link>
    </div>
    <h1>echarts封装示例</h1>
    <div>
      <router-link to="EchartsSample">echarts封装</router-link>
    </div>
    <button @click="openIframePopup()">打开弹窗</button>

    <div
      id="iframePopup"
      style="
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
      "
    >
      <iframe
        src="https://staging.equalearning.net/business/product/saleIndex/4e9c3c6a-c488-47c7-bf3c-c781be52570a"
        style="width: 80%; height: 80%; margin: 10% auto; display: block"
      ></iframe>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
//引入store
import store from "../stores/store.js";
// 组件中导入mapGetters
import { mapGetters, mapActions } from "vuex";
import CustomTooltip from "@/components/CustomTooltip";

export default {
  name: "HelloWorld",
  //使用
  store,
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      date: "",
      switchLangTxt: "中",
      isEng: false,
      // count: this.$store.state.count
    };
  },
  components: {
    "custom-tooltip": CustomTooltip,
  },
  mounted() {
    //dayjs用法
    this.date = dayjs().format("YYYY-MM-DD dddd HH:mm:ss.SSS A");
    //2021-07-06 Tuesday 10:23:53.492 AM
  },
  //store可以通过computed来调取
  computed: {
    // count(){
    //   return this.$store.state.count;
    // }
    ...mapGetters(["count"]),
  },
  methods: {
    openIframePopup() {
      document.getElementById('iframePopup').style.display = 'block';
    },
    ...mapActions(["addAction", "reduceAction"]),
    switchLang() {
      //默认是中文
      this.isEng = !this.isEng;

      //通过$i18n.locale来切换
      if (this.isEng) {
        this.$i18n.locale = "en";
        this.switchLangTxt = "英";
      } else {
        this.$i18n.locale = "zh";
        this.switchLangTxt = "中";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 设置lang="scss" 使用scss -->
<style lang="scss" scoped>
// 使用$符号去声明一个变量
$base-color: red;
$side: bottom;
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
// Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块，使用@include命令，调用这个mixin。
@mixin myCSS($myColor: blue) {
  color: $myColor;
  background-color: $myColor;
}
.main {
  @include myCSS(yellow);
  color: $base-color;
  // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
  border-#{$side}: 1px solid blue;
  // 嵌套
  .hello {
    font-size: 30px;
    // 在嵌套的代码块内，可以使用&引用父元素。
    &:hover {
      color: green;
    }
  }
}
</style>
